<template>
  <div class="leftBar">
    <router-link class="logo" :to="{ path: '/'}" />
    <div class="ctrl" @click="ctrl" />
    <el-menu :default-openeds="$store.state.navOpend" :default-active="$store.state.activeNavIndex2" class="el-menu-vertical-demo" :unique-opened="true" @open="handleOpen" @close="handleClose">
      <div v-for="(item,index) in nav2Data" :key="index">
        <el-submenu v-if="item.childs.length>0" :key="''+index+''" :index="''+index+''">
          <template slot="title">
            <span class="menu">{{ item.name }}</span>
          </template>
          <el-menu-item v-for="(item2,index2) in item.childs" :key="''+index+'-'+index2+''" :index="''+index+'-'+index2+''" @click="navigator(item2,index2,{item:item,index:index})">
            <i class="icon el-icon-right" />
            <span class="menu">{{ item2.name }}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-else :key="''+index+''" :index="''+index+''" @click="navigator(item,index)">
          <i class="icon el-icon-right" />
          <span class="menu">{{ item.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
// import Util from '@/libs/util'

export default {
  props: {
    showBar: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    // 计算属性的 getter
    nav2Data: function() {
      if (this.$store.state.navData.length > 0) {
        return this.$store.state.navData[this.$store.state.activeNavIndex].childs
      } else {
        return []
      }
    }
  },
  mounted: function() {},
  methods: {
    ctrl() {
      this.$emit('child-event', !this.showBar)
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
      this.$store.commit('SET_navOpend', key)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    navigator(data, index, parent) {
      if (parent) {
        const names = [parent.item.name, data.name]

        if (data.url.indexOf('/zhzy') > -1) { // 综合资源 带子目录
          this.$router.push({
            path: '/zhzy/clk',
            query: {
              id: data.id,
              name: names.join(',')
            }
          })
        } else { // 成果
          let url = ''
          if (parent.item.code == 'cgrl') {
            url = data.url.replace('cgrl', 'cg')
          } else if (parent.item.code == 'cgrlsh') {
            url = data.url.replace('cgrlsh', 'cg')
          } else {
            url = data.url
          }
          this.$router.push({
            path: url,
            query: {
              parent: parent.item.code,
              code: data.code,
              // name:data.name,
              name: names.join(',')
            }
          })
        }
        this.$store.commit('SET_activeNav2', parent.index + '-' + index)
      } else {
        // 其他目录
        this.$router.push({
          path: data.url,
          query: {
            name: data.name,
            id: data.id// 草料库专用
          }
        })
        this.$store.commit('SET_activeNav2', index)
      }
    }
  }
}
</script>
<style lang="scss">
.leftBar {
    .el-menu {
        border-right: none;
        background: none;
        .el-menu-item.is-active,
        .el-menu-item:focus,
        .el-menu-item:hover,
        .el-submenu__title:focus,
        .el-submenu__title:hover {
            background: #1fc37e;
        }
        .el-menu-item {
            &:hover {
                .icon {
                    opacity: 1;
                }
            }
        }
        .menu {
            display: flex;
            align-items: center;
            color: #fff;
            &:before {
                content: ' ';
                display: inline-block;
                margin-right: 8px;
                width: 8px;
                height: 8px;
                border: 2px solid #fff;
                border-radius: 8px;
            }
        }
        .icon {
            float: right;
            color: #fff;
            margin-top: 22px;
            opacity: 0;
            transition: all 0.5s;
        }
    }
}
</style>
<style scoped lang="scss">
.leftBar {
    height: 100%;
    // border-right: solid 1px #e6e6e6;

    .ctrl {
        position: absolute;
        left: 0;
        top: 50%;
        padding: 20px;
        background: #ccc;
        z-index: 1;
        cursor: pointer;
        display: none;
    }
    .logo {
        position: relative;
        display: block;
        margin-bottom: 15px;
        width: 100%;
        height: 110px;
        background: url("../assets/logo.png") center no-repeat;
        &:after {
            content: ' ';
            position: absolute;
            left: 10%;
            right: 10%;
            bottom: 0;
            border-bottom: 1px solid #808697;
        }
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 100%;
        min-height: 400px;
    }

}
</style>
